<template>
  <div class="school">
    <h2 v-text="msg"></h2>
    <h2>学生名字:{{ name }}</h2>
    <h2>学生年龄:{{ myAge }}</h2>
    <h2>学会性别:{{ sex }}</h2>
    <button @click="addAge">点击年龄+1</button>
  </div>
</template>

<script>
//暴露组件
export default {
  name: 'Student',
  //data一定要写成函数
  data() {
    return {
      msg: '学生信息',
      myAge: this.age,
    };
  },
  methods: {
    addAge() {
      this.myAge++;
    },
  },
  // props: ['name', 'age', 'sex'], //简单写法
  //限制类型,是否是必填项，默认值
  props: {
    name: {
      type: String,
      required: true,
    },
    sex: {
      type: String,
      required: true,
    },
    age: {
      type: Number,
      default: 26,
    },
  },
};
</script>

<style>
.school {
  background-color: gray;
}
</style>
